<html>

<head>
  <title>在职教职工</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../lib/elementui/theme-chalk/index.css" type="text/css">
  <style>
    .demo-table-expand {
      font-size: 0;
    }

    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }

    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body>
  <div id="app">
    <template>

      <div class="container_table">
        <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%" stripe
          style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="工号">
                  <span>{{ props.row.sid }}</span>
                </el-form-item>
                <el-form-item label="姓名">
                  <span>{{ props.row.username }}</span>
                </el-form-item>
                <el-form-item label="性别">
                  <span>{{ props.row.gender }}</span>
                </el-form-item>
                <el-form-item label="电话">
                  <span>{{ props.row.tel }}</span>
                </el-form-item>
                <el-form-item label="地址">
                  <span>{{ props.row.address }}</span>
                </el-form-item>
                <el-form-item label="职位">
                  <span>{{ props.row.position }}</span>
                </el-form-item>
                <el-form-item label="部门">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="薪资">
                  <span>{{ props.row.salary }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="工号" prop="sid">
          </el-table-column>
          <el-table-column label="姓名" prop="username">
          </el-table-column>
          <el-table-column label="部门" prop="name">
          </el-table-column>
          <el-table-column label="薪资状态">
            <template slot-scope="props">
              <el-select v-model='props.row.salaryStatus' placeholder="选择薪资状态"
                @change="selectFn1(props.row.sid,$event)">
                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="打卡状态">
            <template slot-scope="props">
              <el-select v-model='props.row.attendStatus' placeholder="选择打卡状态"
                @change="selectFn2(props.row.sid,$event)">
                <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="props">
              <!--编辑-->
              <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                <el-button type="primary" icon="el-icon-edit" circle @click="editstaff1(props.row.sid)"></el-button>
              </el-tooltip>
              <!--删除-->
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <el-button type="danger" icon="el-icon-delete" circle @click="handleDelete(props.row.sid)"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="current_change"
          layout="total, sizes, prev, pager, next, jumper" :page-sizes="pagesizes" :page-size="pagesize" :total="total"
          background>
        </el-pagination>
      </div>
    </template>
    <el-dialog title="提示" :visible.sync="delWindow" width="30%">
      <span v-cloak>请确认是否删除该员工</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delWindow = false" v-cloak>取 消</el-button>
        <el-button type="primary" @click="handleDeleteDo" v-cloak>确 定</el-button>
      </span>
    </el-dialog>
    <!--员工信息修改-->
    <el-dialog title="员工信息修改" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="工号" :label-width="formLabelWidth">
          <el-input v-model="form.sid" disabled auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.username" disabled auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" disabled auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <template>
            <el-radio v-model="form.gender" label="男"></el-radio>
            <el-radio v-model="form.gender" label="女"></el-radio>
          </template>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="form.tel" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="form.address" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门" :label-width="formLabelWidth">
          <el-select v-model="form.departmentId" placeholder="选择部门">
            <el-option v-for="item in departmentData" :key="item.pid" :label="item.name" :value="item.pid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职位" :label-width="formLabelWidth">
          <el-select v-model="form.position" placeholder="选择职位">
            <el-option v-for="item in positioninfo" :key="item.value" :label="item.positionname" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="薪资" :label-width="formLabelWidth">
          <el-input v-model="form.salary" auto-complete="off" onkeyup="value=value.replace(/[^\d]/g,'')"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-cloak @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-cloak type="primary" @click="editstaff2">确 定</el-button>
      </div>
    </el-dialog>
    </template>
  </div>
  <!-- 引入组件库 -->
  <script type="text/javascript" src="../lib/vue.js"></script>
  <script type="text/javascript" src="../lib/elementui/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="../lib/myconfig.js"></script>
  <script type="text/javascript">
    new Vue({
      el: "#app",
      data: {
        radio: '1',
        currentPage: 1,
        pagesizes: [5, 10, 15],
        pagesize: 5,
        formLabelWidth: '120px',
        value1: '',
        value2: '',
        dialogFormVisible: false,
        dialogFormVisible2: false,
        delWindow: false,
        total: 1,
        statuscode:[ {
          code: ''
        }],
        delete: {
          sid: 0
        },
        edit: {
          sid: 0,
        },
        salarystatus: {
          sid: 0,
          salaryStatus: ''
        },
        attendstatus: {
          sid: 0,
          attendStatus: ''
        },
        positioninfo: [{
          value: '',
          positionname: ''
        }],
        tableData: [
          {
            pid: '',
            sid: '',
            username: '',
            password: '',
            tel: '',
            address: '',
            attendStatus: '',
            gender: '',
            position: '',
            name: '',
            departmentId: '',
            salary: '',
            salaryStatus: ''
          }],
        departmentData: [{
          pid: '',
          name: ''
        }],
        form: {
          sid: '',
          username: '',
          password: '',
          tel: '',
          address: '',
          gender: '',
          position: '',
          departmentId: '',
          salary: ''
        },
        options1: [{
          value: 1,
          label: '已发'
        }, {
          value: 0,
          label: '未发'
        }],
        options2: [{
          value: 1,
          label: '已打卡'
        }, {
          value: 0,
          label: '未打卡'
        }],
      },
      created: function () {
        var n = this;
        if (getParamInner("position") == "领导") {
          n.statuscode=[{code:'领导'},{ code:'管理员'}, { code:'教职工'}, { code:'应聘人员'}];
          n.positioninfo = [{ value: '领导', positionname: '领导' }, { value: '管理员', positionname: '管理员' }, { value: '教职工', positionname: '教职工' }, { value: '应聘人员', positionname: '应聘人员' }];
        } else if (getParamInner("position") == "管理员") {
           n.statuscode=[{ code:'管理员'}, { code:'教职工'}, { code:'应聘人员'}];
          n.positioninfo = [{ value: '管理员', positionname: '管理员' }, { value: '教职工', positionname: '教职工' }, { value: '应聘人员', positionname: '应聘人员' }];
        }
        console.log(n.statuscode);
        axios.post(
          myurl + "/department/managerList", this.statuscode
        ).then(function (res) {
          var resData = res.data;
          if (resData !== "") { //
            console.log("me success");
            n.$nextTick(function () {
              n.tableData = resData;
              this.total = resData.length;

            })
            console.log(resData);
          } else {
            console.log("me fail");
            console.log(resData);
          }
          console.log(res);
        });
      },
      beforeCreate() {
        var n = this;
        axios.post(
          myurl + "/department/listDepartment"
        ).then(function (res) {
          var resData = res.data;
          if (resData !== "") { //
            console.log("me success");
            n.$nextTick(function () {
              n.departmentData = resData;
            })
            console.log(resData);
          } else {
            console.log("me fail");
            console.log(resData);
          }
          console.log(res);
        });
      },
      methods: {
        handleSizeChange(val) {
          this.pagesize = val;
        },
        current_change: function (currentPage) {
          this.currentPage = currentPage;
        },
        /*获取要修改的员工的信息*/
        editstaff1: function (id) {
          var n = this;
          this.dialogFormVisible = true;
          this.edit.sid = id;
          console.log(this.edit);
          axios.post(
            myurl + "/staff/findStaff", this.edit
          ).then(function (res) {
            var resData = res.data;
            if (resData !== "") {
              console.log("me success");
              n.$nextTick(function () {
                n.form = resData;
              })
              console.log(resData);
            } else {
              console.log("me fail");
              console.log(resData);
            }
            console.log(res);
          });
        },
        /*提交要修改的员工的信息*/
        editstaff2: function (id) {
          this.dialogFormVisible = false;
          console.log(this.form);
          axios.post(
            myurl + "/staff/update", this.form
          ).then(function (res) {
            resData = res.data;
            if (resData !== "") { //
              console.log("me success");
              location.reload();
            } else {
              console.log("me fail");
            }
            console.log(res);
          });
        },
        /*薪资状态*/
        selectFn1(id, e) {
          this.salarystatus.sid = id;
          this.salarystatus.salaryStatus = e;
          console.log(this.salarystatus);
          axios.post(
            myurl + "/staff/update", this.salarystatus
          ).then(function (res) {
            var resData = res.data;
            if (resData !== "") { //
              console.log("me success");
              location.reload();
              console.log(resData);
            } else {
              console.log("me fail");
              console.log(resData);
            }
            console.log(res);
          });
        },
        /*打卡状态*/
        selectFn2(id, e) {
          this.attendstatus.sid = id;
          this.attendstatus.attendStatus = e;
          console.log(this.attendstatus);
          axios.post(
            myurl + "/staff/update", this.attendstatus
          ).then(function (res) {
            var resData = res.data;
            if (resData !== "") { //
              console.log("me success");
              location.reload();
              console.log(resData);
            } else {
              console.log("me fail");
              console.log(resData);
            }
            console.log(res);
          });
        },
        handleDelete(id) {
          this.delWindow = true;
          this.delete.sid = id;
        },
        handleDeleteDo: function () {
          this.delWindow = false;
          console.log(this.delete);
          axios.post(
            myurl + "/staff/delete", this.delete
          ).then(function (res) {
            var resData = res.data;
            if (resData !== "") { //
              location.reload();
              console.log("me success");
            } else {
              console.log("me fail");
            }
            console.log(res);
          });
        },

      }
    });
  </script>
</body>

</html>